<template>
	<view class="container">
		<view class="container-video" :style="{width: width + 'px' , height: height + 'px'}">
			<VideoVue :src="src" :imgUrl="imgUrl" :uniqueKey="uniqueKey" @play="play" ref="VideoVueRef"/>
		</view>
	</view>
</template>

<script>
	import VideoVue from '@/components/video/video.vue'
	export default {
		components: {
			VideoVue
		},
		props: {
			src: {
				type: String,
				default: () => ''
			},
			uniqueKey: {
				type: String,
				default: () => {}
			}
		},
		data() {
			return {
				width: 0,
				height: 0
			}
		},
		watch: {
			'src': {
				handler(val) {
					console.log('width,height=>val', val)
					if (val) {

						this.handleSetImageStyle(val + '?x-oss-process=video/snapshot,t_0,f_jpg').then(({
							width,
							height
						}) => {
							console.log('width,height====w', width, height)
							console.log('width,height====>', val + '?x-oss-process=video/snapshot,t_0,f_jpg')
							this.setImageInfo({
								width,
								height
							})
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			imgUrl() {
				return this.$props.src + '?x-oss-process=video/snapshot,t_0,f_jpg'
			},
			maxWidth(){
				return this.$store.state.systemInfo.screenWidth - 30
			}
		},
		created() {
			this.getScreenWidth()
		},
		methods: {
			play(){
				this.$emit('play')
			},
			//js 简写
			async handleSetImageStyle(src) {
				// 由于方法是异步的，渲染时高度会不生效，所以要加await
				let imageInfoObj = await uni.getImageInfo({
					src
				})

				// 取到图片的宽高
				let {
					width,
					height
				} = imageInfoObj[1]

				return {
					width,
					height
				}
			},
			setImageInfo({
				width,
				height
			}) {

				// const maxWidth = 311;
				// const maxHeight = 200;

				const originalWidth = width;
				const originalHeight = height;
				const maxWidth = this.maxWidth;
				const maxHeight = 250;

				const aspectRatio = originalWidth / originalHeight;

				let newWidth, newHeight;

				if (originalHeight > originalWidth) {
					//竖排
					if(aspectRatio * maxHeight > maxWidth) {
						newWidth = maxWidth
						newHeight = maxWidth / aspectRatio
					} else {
						newWidth = aspectRatio * maxHeight
						newHeight = maxHeight
					}
					
				} else {
					newWidth = maxWidth
					newHeight = maxWidth / aspectRatio
				}

				this.width = newWidth.toFixed(2)
				this.height = newHeight.toFixed(2)
				console.log(`New Width: ${newWidth.toFixed(2)}px`);
				console.log(`New WidthHeight: ${newHeight.toFixed(2)}px`);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

		.container-video {
			// background: palevioletred;
		}
	}
</style>